<template>
  <el-dialog
      :model-value="dialogVisible"
      @update:model-value="$emit('update:dialogVisible', $event)"
      :title="title"
      width="600px"
      :before-close="handleClose"
  >
    <el-form
        ref="ruleFormRef"
        style="width: 570px;height: 450px"
        :model="formData"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item prop="username">
        <el-input v-model="formData.username" placeholder="员工编号" class="custom-input"/>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="formData.name" placeholder="员工名称" class="custom-input"/>
      </el-form-item>
      <el-form-item prop="role">
        <el-input v-model="formData.role" placeholder="角色" class="custom-input"/>
      </el-form-item>
      <el-form-item prop="gender" style="width: 100%; height: 54px;">
        <el-select v-model="formData.gender" placeholder="请选择性别" class="custom-input">
          <el-option v-for="gender in genderList" :key="gender.value" :label="gender.label"
                     :value="gender.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input v-model="formData.phone" placeholder="联系方式" class="custom-input"/>
      </el-form-item>
      <el-form-item label="是否有效" prop="status">
        <el-switch
            v-model="formData.status"
            :active-value="1"
            :inactive-value="0"
            active-text="有效"
            inactive-text="无效"
        />
      </el-form-item>

      <el-form-item style="float: right">
        <el-button @click="resetForm">关闭</el-button>
        <el-button @click="save">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {ref, reactive} from 'vue';
import {ElMessage} from "element-plus";
import {addUser, updateUser} from '@/api/user/user.js';

// 修改 props 定义
const props = defineProps({
  dialogVisible: Boolean,
  title: String,
  formData: Object,
  genderList: Array
});

const emit = defineEmits(['update:dialogVisible', 'refresh']);

const rules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  ],
  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
    {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
  ],
  gender: [
    {required: true, message: '请选择性别', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
  ],
}

const ruleFormRef = ref(null);

// 修改 handleClose 方法
const handleClose = () => {
  emit('update:dialogVisible', false);
}

const resetForm = () => {
  if (props.formData) {
    Object.keys(props.formData).forEach(key => props.formData[key] = '');
    emit('update:formData', props.formData);
  }
  handleClose()
}

const save = async () => {
  if (!props.formData) return;

  await ruleFormRef.value.validate(async valid => {
    if (valid) {
      let res = null;
      if (props.formData.id) {
        res = await updateUser(props.formData);
      } else {
        res = await addUser(props.formData);
      }
      if (res.code) {
        ElMessage.success('操作成功');
        emit('refresh');
        resetForm();
        emit('update:dialogVisible', false);
      } else {
        ElMessage.error('操作失败');
      }
    } else {
      ElMessage.warning('请填写正确的表单');
    }
  });
};
</script>

<style scoped>
.custom-input {
  width: 100%;
  height: 54px;
}

.custom-input :deep(.el-input__inner),
.custom-input :deep(.el-textarea__inner),
.custom-input :deep(.el-select) {
  height: 54px;
  line-height: 54px;
}

.custom-input :deep(.el-select .el-input__inner) {
  height: 54px;
  line-height: 54px;
}
</style>